4.14 IMG (In-line Images) Element

Images can be included within a hypertext anchor: thus you can make an image that behaves as a button linked to other documents or resources. An example is given at the bottom of this document.

The IMG element is empty, meaning there is no closing </IMG>. It has several attributes:

SRC="image_url"

SRC give the URL of the image document -- this attribute must be present. The naming scheme is the same as for hypertext links: thus relative URLs such as SRC="foo.gif" or SRC="../foo.gif" are commonly used. At present you can only inline GIF images and X-bitmaps (standard extensions are .gif, .xbm, .xpm), although many (but not all) browsers also support inline JPEG (standard extensions .jpeg or .jpg) images as well.

ALT="alternative text"

Some browsers cannot display images, while users connecting via phone lines often turn off image loading. The ALT attribute lets you specify a text alternative to the image, for use in these circumstances. You should always include an ALT alternative, particularly if the image is a button linked to some other resource. If the image is unimportant, you can always put ALT="".

ALIGN="bottom", "middle", "top"

ALIGN tells the browser how to align the image with the neighbouring text. "Bottom" aligns the bottom of the image with the baseline of the text, and is the default. "Middle" aligns the middle of the image with the baseline of text, and "top" aligns the top of the image with the top of the tallest item in the line. This attribute is optional.
"left", "right" (HTML 3)
HTML 3 supports left and right-aligned images. In this case, the image "floats" to the left or right margin, with the text following the image element flowing around the image. This attribute value is supported by several browsers, including Netscape Navigator and the Microsoft Internet Explorer.
"absmiddle", "absbottom", "texttop", "baseline" (Netscape Navigator)
Netscape navigator supports these extra attributes, which work like "top", "middle" and "bottom" but which give additional vertical control of image placement, when the image flows with the text. These are illustrated in the example document.

HEIGHT="n", WIDTH="n" (HTML 3)

HEIGHT and WIDTH specify the display height and width (in pixels) for the image -- if the picture does not fit, the browser should rescale the image to fit in the specified box. An example is HEIGHT="30" WIDTH="50" This is supported by a few browsers, including Netscape Navigator.

ISMAP

Many browsers also support the ISMAP attribute. This attribute marks the image as an active image map. This allows the user to click the mouse over the image and have different regions of the image cause different actions. See ISMAP to find out more about how to do this.

BORDER="n" (Netscape Only)

If ISMAP is used, then the image is a hypertext link, and will be surrounded by a border to idicate this. BORDER specifies the width of this border. In particular, BORDER=0 specifies no border, which is rather cute.

HSPACE="n", VSPACE="n" (Netscape only)

These attributes specify the horizontal and vertical space, in pixels, to leave between the image and the surrounding elements.

LOWSRC="URL" (Netscape only)

Specifies a low-resolution image file. A netscape browser will first load the smaller, low-resolution file specified by LOWSRC and will then load the larger SRC-specified image file.

Examples of IMG Elements